<template>
  <div class="app">
    <ul class="oul">
      <!-- :key 给当前节点添加一个唯一值 -->
      <li :class="{ active: count === index }" 
      v-for="(item, index) in list" 
      @click="changeCount(index)"
      :key="index" >
      {{item}}
      </li>
    </ul>
    <Pub v-show="count === 0 " />
    <Admin v-show="count === 1 "/>
  </div>
</template>

<script>
import Pub from "./Pub.vue"
import Admin from "./Admin.vue";
export default {
  components: {
    Pub,
    Admin,
  }   ,
  data() {
    return {
      count:0,
      list: [
        "评论管理" ,"发布评论"
      ]
    }
  },
  methods: {
    //切换tab
    changeCount(index) {
      this.count = index
    }
  },
}
</script>

<style>
  .oul{
    display: flex;
    text-align: center;
    line-height: 40px;
  }
  .oul li{
    flex: 1;
  }
  .active{
    background-color: skyblue ;
    
  }
</style>